import React, { Component } from 'react'
import { connect } from 'react-redux'
import UrlPattern from 'url-pattern'
import { withRouter } from 'react-router-dom'
import { Row, Col, Icon } from 'antd'
import { TwsBelongTask } from 'tws-antd'
import EditStatusBox from './assignment/edit-status-box'
import CommentBox from './assignment/comment-box'
import ReferenceButtonGroup from './assignment/reference-button-group'
import OnlineCoding from './assignment/online-coding-quiz'
import * as actions from '../actions/online-coding'
import * as reviewActions from '../actions/reviewQuiz'
import * as sectionCommentActions from '../actions/comment'
import AssignmentSupplementaryBox from './assignment/assignment-supplementary-box'

import '../less/index.less'
import { tutorAssignmentPageBodyUrl } from '../constant/constant-url'
import LeftMenu from './assignment/left-menu'

class TutorAssignmentPageBody extends Component {
  constructor (props) {
    super(props)
    this.state = {
      programId: 0,
      taskId: 0,
      assignmentId: 0,
      studentId: 0,
      quizId: 0
    }
  }

  componentDidMount () {
    const { history, location } = this.props
    history.listen(this.update.bind(this))
    this.update(location)
    const { studentId, assignmentId, taskId } = this.props.match.params
    this.props.getOnlineCodingQuizzesByStudentId(assignmentId, studentId)
    this.props.getTask(taskId)
  }

  update (location) {
    const pattern = new UrlPattern(tutorAssignmentPageBodyUrl)
    const urlParams = pattern.match(location.pathname.replace('divider/', '')) || {}
    const { taskId, programId, assignmentId, studentId, quizId } = urlParams

    this.setState({
      taskId,
      programId,
      assignmentId,
      studentId,
      quizId
    })
    if (quizId) {
      this.props.getComments(assignmentId, studentId, quizId)
      this.props.getReviewQuiz(assignmentId, studentId, quizId)
    }
  }

  handleClick (e) {
    const { assignmentId, studentId, programId, taskId } = this.state

    this.setState({
      quizId: parseInt(e.key)
    })

    this.props.history.push(`/tutor/program/${programId}/task/${taskId}/student/${studentId}/assignment/${assignmentId}/quiz/${parseInt(e.key)}`)
  }

  getCompleteName (student) {
    const name = student.name || ''
    const userName = student.userName || ''

    return `${name}(@${userName})`
  }

  render () {
    const { settings, suggestions, quizzes, review, task, student } = this.props
    const { taskId, programId, assignmentId, studentId, quizId } = this.state
    const { studentWebUrl } = settings
    const assignment = task.assignments.find(assignment => assignment.id === parseInt(assignmentId)) || {}

    const quiz = quizzes.find(quiz => parseInt(quizId) === quiz.id) || {}
    const completeName = this.getCompleteName(student)
    const type = 'tutor'
    const supplement = review.supplement || '学员暂时没有补充内容'

    return <div>
      <div className='bottom-line padding-b-2'>
        <Row gutter={4}>
          <Col span={5} offset={1}>
            <h1>{assignment.title || ''}</h1>
          </Col>
        </Row>
      </div>
      <Row className='margin-t-2'>
        <Col span={3}>
          <LeftMenu quizzes={quizzes} quizId={quizId} handleClick={this.handleClick.bind(this)} />
        </Col>
        <Col offset={1} span={20}>
          <div className='bottom-line padding-b-2'>
            <Row gutter={4}>
              <Col span={5}>
                <h2>{quiz.onlineCodingName}</h2>
              </Col>
              <Col span={4}>
                <h3>by {completeName}</h3>
              </Col>
              <Col span={6}>
                {
                  programId
                    ? <ReferenceButtonGroup
                      isTutor
                      review={review}
                      programId={programId}
                      quizId={quiz.id}
                      taskId={taskId}
                      assignmentId={assignmentId}
                      quizDefinition={quiz}
                      studentId={studentId} />
                    : ''
                }
              </Col>
              <EditStatusBox
                isTutor
                review={review}
                assignmentId={assignmentId}
                quizId={quiz.id}
                studentId={studentId}
                isSubmit={quiz.userAnswer !== ''}
                updateReviewGrade={this.props.updateReviewGrade}
              />
            </Row>
          </div>
          <TwsBelongTask title={'所属任务卡'}>
            <a
              href={studentWebUrl + `/tutor/program/${this.state.programId}/task/${this.state.taskId}/student/${this.state.studentId}`}>
              <Icon type='arrow-left' />{task.title}
            </a>
          </TwsBelongTask>
          {
            quiz.id
              ? <OnlineCoding
                isTutor
                runningLogs
                programId={this.state.programId}
                taskId={this.state.taskId}
                assignmentId={this.state.assignmentId}
                quiz={quiz}
              />
              : ''
          }
          <AssignmentSupplementaryBox
            reviewQuizId={review.id}
            supplement={supplement}
            userType={type}
                        />
          <CommentBox
            suggestions={suggestions}
            isTutor
            assignmentId={assignmentId}
            studentId={studentId}
            user={this.props.user}
            quizId={quiz.id}
          />
        </Col>
      </Row>
    </div>
  }
}

const mapStateToProps = ({user, settings, onlineCodingQuizzes, review, comments, task }) => ({
  user,
  settings,
  review,
  quizzes: onlineCodingQuizzes,
  quizAnswerSheet: {
    isFinished: true,
    isLast: true,
    isStarted: true,
    status: 4
  },
  task,
  suggestions: comments,
  student: {
    name: 'zt'
  }
})

const mapDispatchToProps = dispatch => ({
  getOnlineCodingQuizzesByStudentId: (assignmentId, studentId) => dispatch(actions.getStudentOnlineCodingQuizzes(assignmentId, studentId)),
  getComments: (assignmentId, studentId, quizId) => dispatch(sectionCommentActions.getSectionComments(assignmentId, studentId, quizId)),
  getReviewQuiz: (assignmentId, studentId, quizId) => dispatch(reviewActions.tutorGetReviewOnlineCodingQuiz(assignmentId, studentId, quizId)),
  updateReviewGrade: (data, changeStatus) => dispatch(reviewActions.updateReviewQuiz(data, changeStatus)),
  getTask: (taskId) => dispatch(actions.getTask(taskId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TutorAssignmentPageBody))
